import React from 'react';
import {
    View,
    Text,
    Navigator,
    TouchableOpacity,
    Image,
    AsyncStorage,
    Button
} from 'react-native';
import Swiper from 'react-native-swiper';
import Test from './Test';
import PubSub from 'pubsub-js';//发布、订阅来实现组件间的通信
var MY_TOPIC = "hello";

import { styles } from '../../styles';
var img1 = require('../../images/1.jpg');
var img2 = require('../../images/2.jpg');
var img3 = require('../../images/3.jpg');
var img4 = require('../../images/4.jpg');

var coverImg1 = require('../../images/cover/restrurant.png');
var coverImg2 = require('../../images/cover/food.png');
var coverImg3 = require('../../images/cover/shop.png');
var coverImg4 = require('../../images/cover/low_consumption.png');
var coverImg5 = require('../../images/cover/beach.png');
var coverImg6 = require('../../images/cover/sight.png');
var coverImg7 = require('../../images/cover/bike.png');
var coverImg8 = require('../../images/cover/leisure.png');

export default class FirstPageComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            fist:1,
        };
        AsyncStorage.setItem('demo','hellow');
    }
    componentDidMount() {
    }
    childMethod() {
      const { navigator } = this.props;
      //为什么这里可以取得 props.navigator?请看上文:
      //<Component {...route.params} navigator={navigator} />
      //这里传递了navigator作为props
      if(navigator) {
          navigator.push({
              name: 'Test',
              component: Test,
          })
      }
    }
    _pressButton() {
        const { navigator } = this.props;
        //为什么这里可以取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator作为props
        if(navigator) {
            navigator.push({
                name: 'Test',
                component: Test,
            })
        }
    }
    _changeBottom() {
        PubSub.publish(MY_TOPIC);
    }
    renderCover() {

    }
    render() {
        let { position } = this.props;
        return (
            <View>
              <Swiper style={styles.SwiperWrapper} showsButtons={false} height={250}>
                <View >
                  <Image source={img1} style={styles.SwiperImage} />
                </View>
                <View >
                  <Image source={img2} style={styles.SwiperImage} />
                </View>
                <View >
                  <Image source={img3} style={styles.SwiperImage} />
                </View>
                <View >
                  <Image source={img4} style={styles.SwiperImage} />
                </View>
              </Swiper>
              <View style={styles.cover}>
                <TouchableOpacity onPress={this._pressButton.bind(this)} style={styles.flex1Center} >
                  <Image source={coverImg1} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>餐厅</Text></View>
                </TouchableOpacity>
                <TouchableOpacity onPress={this._changeBottom.bind(this)} style={styles.flex1Center} >
                  <Image source={coverImg2} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>饮食</Text></View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.flex1Center} >
                  <Image source={coverImg3} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>购物</Text></View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.flex1Center} >
                  <Image source={coverImg4} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>储蓄</Text></View>
                </TouchableOpacity>
              </View>
              <View style={styles.cover}>
                <TouchableOpacity style={styles.flex1Center} >
                  <Image source={coverImg5} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>旅游</Text></View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.flex1Center} >
                  <Image source={coverImg6} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>冲浪</Text></View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.flex1Center} >
                  <Image source={coverImg7} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>骑行</Text></View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.flex1Center} >
                  <Image source={coverImg8} style={styles.coverImage} />
                  <View><Text style={styles.corverFontSize}>悠闲</Text></View>
                </TouchableOpacity>
              </View>
              {
                false ?
                <View>
                  <Button
                    onPress={this._pressButton.bind(this,4)}
                    title="点我跳转"
                  />
                  <Button
                    onPress={this._changeBottom.bind(this,4)}
                    title="切换底部按钮"
                    color="#841584"
                  />
                </View>
              :<View></View>
              }

            </View>
        );
    }
}
